<template>
	<div v-if="list" class="foSi14" style="padding: 20px;">
		<div class="dis disAl disJuB wid100 mar-bott20">
			<div class="hei86" style="width: 150px;">
				<img :src="list.cover" class="wh100">
			</div>
			<div class="mar-right20 que cuPo coFFF" style="background: #48a9f3;" @click.stop="edit">编辑</div>
		</div>
		<div class="foSi12 titl">基本信息</div>
		<div class="wid100 hei44 item-l item-p dis disAl disJuB">
			<div>班课名称</div>
			<div>{{list.name}}</div>
		</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>开课时间</div>
				<div>{{list.start_time}}</div>
			</div>
			<div class="item-w item-p dis disAl disJuB">
				<div>结课时间</div>
				<div>{{list.end_time}}</div>
			</div>
		</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>班级课时</div>
				<div>{{list.class_hours}}</div>
			</div>
			<div class="item-w item-p dis disAl disJuB">
				<div>已排课数</div>
				<div>{{list.pk}}</div>
			</div>
		</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>参考售价</div>
				<div>￥{{list.money}}</div>
			</div>
			<div class="item-w item-p dis disAl disJuB">
				<div>人数上限</div>
				<div>{{list.max_people==0?'不限制':list.max_people}}</div>
			</div>
		</div>
		<div class="wid100 hei44 item-l dis disAl mar-bott5">
			<div class="item-w item-p item-r dis disAl disJuB">
				<div>请假限制</div>
				<div>{{list.leaves == 0?'不可请假':list.leaves}}</div>
			</div>
			<div class="item-w item-p dis disAl disJuB">
				<div>购买人限制</div>
				<div>会员</div>
			</div>
		</div>
		<div class="mar-top30 dis hei40 foSi16 mar-bott20" style="border-bottom: 1px solid #d9d9d9;">
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(1)" :class="type === 1?'curr':'curr1'">上课记录
			</div>
			<div class="hei100 item-p dis disAl cuPo" @click.stop="typeClick(2)" :class="type === 2?'curr':'curr1'">会员信息
			</div>
		</div>
		<div v-if="type === 1">
			<div class="dis">
				<div class="mar-right10">
					<div class="foSi12" style="height: 20px;color: #787878;">上课时间</div>
					<div class="dis disAl hei40">
						<el-date-picker v-model="search.start" value-format="yyyy-MM-dd" style="width: 140px;" type="date" placeholder="开始时间" />
						<el-date-picker v-model="search.end" value-format="yyyy-MM-dd" class="mar-left10" style="width: 140px;" type="date"
							placeholder="截止时间" />
					</div>
				</div>
				<div class="hei60 dis disAl" style="padding-top: 20px;">
					<el-button type="primary" style="height: 32px;" @click="sousuo">搜索</el-button>
				</div>
			</div>
			<div style="margin-top: 20px">
				<el-table :data="tableData" v-loading="listLoading" stripe style="width: 100%">
					<div slot="empty" class="m-empty-box">
						<div class="mar" style="width: 168px;height: 180px;">
							<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100"/>
						</div>
						<div class="title">暂无数据</div>
					</div>
					<el-table-column prop="class_time" label="上课时间	" />
					<el-table-column prop="coach_name" label="老师" />
					<el-table-column prop="member_count" label="应到人数" />
					<el-table-column prop="leave_nums" label="签到人数" />
					<el-table-column prop="sign_nums" label="请假人数" />
					<el-table-column prop="truancy_nums" label="旷课人数" />
					<el-table-column label="操作	">
						<template slot-scope="scope">
							<div class="dis disAl flwa">
								<div class="dis disAl mar-right10 cuPo mar-bott5" @click="xiangqing()">
									<i class="el-icon-document" style="color: rgb(25, 165, 88); font-size: 20px" />签到及请假
								</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
					@pagination="getList" />
			</div>
		</div>
		<div v-if="type === 2">
			<div class="dis">
				<div class="mar-right10">
					<div class="foSi12" style="height: 20px;color: #787878;">报班时间</div>
					<div class="dis disAl hei40">
						<el-date-picker v-model="search.start" style="width: 140px;" type="date" placeholder="开始时间" />
						<el-date-picker v-model="search.end" class="mar-left10" style="width: 140px;" type="date"
							placeholder="截止时间" />
					</div>
				</div>
				<div class="mar-right10">
					<div class="foSi12" style="height: 20px;color: #787878;">状态</div>
					<div class="dis disAl hei40">
						<el-select v-model="search.state" style="width: 100px">
							<el-option v-for="(item,index) in search.stateList" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
				</div>
				<div class="mar-right10">
					<div class="foSi12" style="height: 20px;color: #787878;">班级名称</div>
					<div class="dis disAl hei40">
						<el-input v-model="search.name" style="width: 120px;" placeholder="班级名称" />
					</div>
				</div>
				<div class="hei60 dis disAl" style="padding-top: 20px;">
					<el-button type="primary" style="height: 32px;">搜索</el-button>
				</div>
			</div>
			<div style="margin-top: 20px">
				<el-table :data="tableData1" v-loading="listLoading1" stripe style="width: 100%">
					<div slot="empty" class="m-empty-box">
						<div class="mar" style="width: 168px;height: 180px;">
							<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100"/>
						</div>
						<div class="title">暂无数据</div>
					</div>
					<el-table-column prop="start_time_desc" label="会员姓名" />
					<el-table-column prop="coach_name" label="电话" />
					<el-table-column prop="class_member_nums" label="收费金额" />
					<el-table-column prop="leave_nums" label="已消耗课时" />
					<el-table-column prop="sign_nums" label="剩余课时" />
					<el-table-column prop="truancy_nums" label="总课时" />
					<el-table-column prop="truancy_nums" label="报班时间" />
					<el-table-column prop="truancy_nums" label="状态" />
				</el-table>
				<pagination v-show="total1>0" :total="total1" :page.sync="listQuery1.page" :limit.sync="listQuery1.limit"
					@pagination="getList1" />
			</div>
		</div>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import {
    getInfo,
    getSchoolList
  } from '@/api/class';
	export default {
		name: 'privateParticulars',
		components: {
			Pagination
		},
		data() {
			return {
				list: null,
				type: 1,
				total: 1,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 0
				},
				tableData: [],
				total1: 0,
				listLoading1: false,
				listQuery1: {
					page: 1,
					limit: 0
				},
				tableData1: [],
				search: {
					stateList: [{
						value: '0',
						label: '全部'
					}, {
						value: '1',
						label: '上架'
					}, {
						value: '2',
						label: '下架'
					}], // 状态
					start: '',
					end: '',
					name: ''
				},
			}
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: [{
					name: '编辑班级',
					url: '/course/privateParticulars',
					pd: true
				}]
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
      this.getSchoolList()
		},
		methods: {
			typeClick(index) {
				if (this.type !== index) {
					this.type = index
				}
			},
			fanhui() {
				this.$router.push({
					path: '/course/classPrivateList'
				})
			},
			edit() {
				this.$router.push({
					path: '/course/classPrivateEdit?type=1&id=' + this.id
				})
			},
      xiangqing() {
				this.$router.push({
					path: '/classrecord'
				})
			},
			getList1(){
				this.listLoading1 = true
				this.listLoading1 = false
			},
			getList() {
				this.listLoading1 = true
				this.list = [];

        getInfo({ 'id':this.id }).then(response => {
          const {
            data
          } = response
          console.log(data)
          this.list = data;
          this.tableData = [];
        }).catch(error => {
          console.log(error)
        })
				this.listLoading1 = false
			},
      sousuo(){
        this.getSchoolList();
      },
      getSchoolList(){
        this.tableData = [];
        var params = this.search;
        params['id'] = this.id;
        getSchoolList(params).then(response => {
          const {
            data
          } = response
          this.tableData = data.data;
        }).catch(error => {
          console.log(error)
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.que {
		display: inline-block;
		padding: 0 24px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		vertical-align: top;
	}

	.titl {
		height: 25px;
		color: #787878;
	}

	.item-l {
		background: #f2f2f2;
		margin-bottom: 2px;
	}

	.item-p {
		padding: 0 15px;
	}

	.item-w {
		width: 50%;
		height: 100%;
	}

	.item-r {
		border-right: 2px solid #fff;
	}

	.curr {
		border-bottom: 4px solid #48a9f3;
	}

	.curr1 {
		border-bottom: 4px solid #fff;
	}
</style>
